<template>
  <div id="mainApp">
    <table>
      <tr>
        <td>
          <div id="screen">
            <router-view keep-alive></router-view>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div id = "button-area">
            <table>
              <tr>
                <td>
                  <button id = "pwr-btn" @click="click('pwr')"> </button>
                </td>

                <td>
                  <button id = "ack-btn" @click="click('alarm-ack')"> </button>
                  <button id = "rng-add-btn" @click="click('add')">  </button>
                  <button id = "disp-btn" @click="click('disp')"> </button>
                  <button id = "menu-btn" @click="click('menu-esc')">  </button>
                  <button id = "up-btn" @click="click('up')">  </button>
                </td>
              </tr>

              <tr>
                <td></td>

                <td>
                  <button id = "func-btn" @click="click('func')">  </button>
                  <button id = "rng-sub-btn" @click="click('sub')">  </button>
                  <button id = "left-btn" @mousedown = "mousedown('left')"
                          @mouseup="mouseup('left')">  </button>
                  <button id = "right-btn" @mousedown = "mousedown('right-ent')" @mouseup="mouseup('right-ent')">  </button>
                  <button id = "down-btn" @click="click('down')">  </button>
                </td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import * as EchoKey from './utils/echo-key'

  function appPreprocess (evt) {
    if (evt.holdon === false) {
      evt.app.$options.echoBeforeClick.call(vm, evt)
    }
    if (!evt.continue) {
      return
    }

    let funcname = EchoKey.KEYMAP[evt.keyname]
    if (evt.holdon === true) {
      funcname += 'holdon'
    }

    if (evt.dblclick === true) {
      funcname += 'dblclick'
    }

    let vm = evt.vm
    let handler = vm.$options[funcname]
    if (handler) {
      handler.call(vm, evt)
    }
    if (evt.continue && evt.anykey) {
      handler = vm.$options[EchoKey.ANYKEY]
      if (handler) {
        handler.call(vm, evt)
      }
    }
  }

  let clickTimeout = {
    _timeout: null,
    set: function (fn) {
      let that = this
      that.clear()
      that._timeout = setTimeout(fn, 300)
    },
    clear: function () {
      let that = this
      if (that._timeout) {
        window.clearTimeout(that._timeout)
      }
    }
  }

  export default {
    data () {
      return {
      }
    },
    methods: {
      mousedown (keyname) {
        if (this.holdonTimeout >= 0) {
          clearInterval(this.holdonTimeout)
        }

        let _this = this
        // 500毫秒算长按
        this.holdonTimeout = setInterval(function () {
          _this.holdon(keyname)
        }, 500)
      },
      mouseup (keyname) {
        window.clearInterval(this.holdonTimeout)
        this.click(keyname)
      },
      holdon (keyname) {
        // 需要处理长按的事件有
        // 1.关机
        // 2.长按LIST方向切换mark/track,route,beancon(短按为正向切换)
        // 3.plotter长按route按钮显示route页面
        // 4.亮度调节长按right-click恢复默认
        // 5.长按display按钮,反向调节displaymode
        let evt = {
          echo: this.$echo,
          keyname: keyname,
          continue: true,
          anykey: true,
          currentPage: this.$echo.currentPage,
          app: this,
          vm: this,
          holdon: true
        }
        appPreprocess(evt)
        if (evt.continue) {
          this.$echo.holdon(evt)
        }
      },
      dblclick (keyname) {
        let evt = {
          echo: this.$echo,
          keyname: keyname,
          continue: true,
          anykey: true,
          currentPage: this.$echo.currentPage,
          app: this,
          vm: this,
          holdon: false,
          dblclick: true
        }
        clickTimeout.clear()
        appPreprocess(evt)
        if (evt.continue) {
          this.$echo.dbclick(evt)
        }
      },
      click (keyname) {
        /*
         事件触发顺序:
         1. appClick[gpsBeforeClick, 具体的按键, anykey]
         2. currentPage[具体的按键, anykey]
         */
        let evt = {
          echo: this.$echo,
          keyname: keyname,
          continue: true,
          anykey: true,
          currentPage: this.$echo.currentPage,
          app: this,
          vm: this,
          holdon: false,
          dblclick: false
        }
        let _this = this
        appPreprocess(evt)
        if (evt.continue) {
          _this.$echo.click(evt)
        }
      }
    },
    echoBeforeClick (evt) {
    },
    [EchoKey.PWR] (evt) {
      let _echo = this.$echo
      if (_echo.poweron === false) {
        _echo.poweron = true
        _echo.routeTo('pwr')
      } else {
        _echo.poweron = false
        _echo.routeTo('')
      }
    }
  }
</script>

<style lang="less">
  @import './less/echo.less';

  html {
    height: 100%;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    -moz-user-select: none; /*mozilar*/
    -webkit-user-select: none; /*webkit*/
    -ms-user-select: none; /*IE*/
    user-select: none;
  }

  #mainApp {
    color: #2c3e50;
    margin-top: -100px;
    font-family: Consolas, Source Sans Pro, Helvetica, sans-serif;
    background: url('./assets/background.png') no-repeat;
    text-align: center;
    width: 1568px;
    height: 1717px;
    min-width: 1568px;
    min-height: 1717px;
  }

  #screen {
    width: @w-screen;
    height: @h-screen;
    overflow: hidden;
    background-color: #a2a2a2;
    position: relative;
    top: 342px;
    left: 295px;
  }

  .imagebtn(@path) {
    background: url('./assets/@{path}_0.png') no-repeat;
    border: none;
  }
  .imagebtn_hover(@path) {
    background: url('./assets/@{path}_1.png') no-repeat;
    cursor: pointer;
  }

  .imagesize(@w, @h) {
    width: @w;
    height: @h;
  }

  #pwr-btn {
    .imagebtn('power');
    .imagesize(100px, 100px);
    position: relative;
    top: 670px;
    left: 208px;
  }

  #pwr-btn:hover {
    .imagebtn_hover('power');
  }

  #ack-btn {
    .imagebtn('ack');
    .imagesize(150px, 100px);
    position: relative;
    top: 600px;
    left: 516px;
  }

  #ack-btn:hover {
    .imagebtn_hover('ack');
  }

  #rng-add-btn {
    .imagebtn('rng_add');
    .imagesize(150px, 100px);
    position: relative;
    top: 600px;
    left: 520px;
  }

  #rng-add-btn:hover {
    .imagebtn_hover('rng_add');
  }

  #disp-btn {
    .imagebtn('disp');
    .imagesize(150px, 100px);
    position: relative;
    top: 600px;
    left: 523px;
  }

  #disp-btn:hover {
    .imagebtn_hover('disp');
  }

  #menu-btn {
    .imagebtn('menu');
    .imagesize(150px, 100px);
    position: relative;
    top: 600px;
    left: 535px;
  }

  #menu-btn:hover {
    .imagebtn_hover('menu');
  }

  #up-btn {
    .imagebtn('up');
    .imagesize(150px, 100px);
    position: relative;
    top: 598px;
    left: 543px;
  }

  #up-btn:hover {
    .imagebtn_hover('up');
  }

  #func-btn {
    .imagebtn('func');
    .imagesize(150px, 100px);
    position: relative;
    top: 625px;
    left: 517px;
  }

  #func-btn:hover {
    .imagebtn_hover('func');
  }

  #rng-sub-btn {
    .imagebtn('rng_sub');
    .imagesize(150px, 100px);
    position: relative;
    top: 625px;
    left: 520px;
  }

  #rng-sub-btn:hover {
    .imagebtn_hover('rng_sub');
  }

  #left-btn {
    .imagebtn('left');
    .imagesize(150px, 100px);
    position: relative;
    top: 625px;
    left: 523px;
  }

  #left-btn:hover {
    .imagebtn_hover('left');
  }

  #right-btn {
    .imagebtn('right');
    .imagesize(150px, 100px);
    position: relative;
    top: 625px;
    left: 533px;
  }

  #right-btn:hover {
    .imagebtn_hover('right');
  }

  #down-btn {
    .imagebtn('down');
    .imagesize(150px, 100px);
    position: relative;
    top: 630px;
    left: 541px;
  }

  #down-btn:hover {
    .imagebtn_hover('down');
  }
</style>
